<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">picker选择列表</block>
		</cu-custom>
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">
				picker
				</view>
				</view>
				<view class="smart-padding-wrap">
					<view class="uni-title">普通选择器</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">当前选择</view>
							<view class="uni-list-cell-db">
								<picker :range="array" :value="index" :range-key="name" @change="bindPickerChange">
									<view class="uni-input">{{array[index].name}}</view>
								</picker>
							</view>
							
						</view>
						
					</view>
					<view class="uni-title">日期选择器</view>
					<view class="uni-list">
						<view class="uni-list-cell">
							<view class="uni-list-cell-left">当前选择</view>
							<view class="uni-list-cell-db">
								<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
									<view class="uni-input">{{date}}</view>
								</picker>
							</view>
							
						</view>
						
					</view>
	</view>
	</view>
</template>

<script>
	function getDate(type){
		const date=new Date()
		let year=date.getFullYear()
		let month=date.getMonth()+1
let day=date.getDate()
if(type=='start'){
	year=year-60;
}else if(type=='end'){
	year=year+2;
}
month=month>9?month:'0'+month;
day=day>9?day:'0'+day;
return `${year}-${month}-${day}`; 
	}
	export default{
		data(){
			return{
				array:[{name:'中国'},{name:'美国'},{name:'日本'},{name:'巴西'}],
				index:0,
				date:getDate({
					format:true
				}),
				startDate:getDate('start'),
				endDate:getDate('end'),
				time:'12:01'
			}
		},
		methods:{
			bindPickerChange(e){
				// console.log("显示打印结果",e.detail);
				this.index=e.detail.value;
			},
			bindDateChange(e){
				this.date=e.detail.value;
			}
		}
	}
</script>

<style>
	.uni-title{
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
		line-height: 1.5;
	}
	.uni-list{
		background-color: #fff;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.uni-list-cell{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell-db, .uni-list-cell-right{
		flex:1;
	}
	.uni-list-cell-left{
		white-space: nowrap;
		font-size: 28rpx;
		padding: 0 30rpx;
	}
	.uni-input{
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #fff;
		flex:1;
	}
	
</style>